<template>
  <div class="controls">
    <a-tooltip title="定位">
      <div class="func position-grey" @click="$emit('doPostion')"></div>
    </a-tooltip>
    <!-- 全屏 -->
    <a-tooltip title="全屏">
      <div class="func screen-grey" @click="fullScreen"></div>
    </a-tooltip>
    <!-- 放大缩小 -->
    <a-tooltip title="放大">
      <div class="func scal-grey" @click="$emit('changeZoom', 0)"></div>
    </a-tooltip>
    <a-tooltip title="缩小">
      <div class="func narrow-grey" @click="$emit('changeZoom', 1)"></div>
    </a-tooltip>
  </div>
</template>
<script>
export default {
  methods: {
    //全屏展示
    fullScreen() {
      if (
        !document.fullscreenElement &&
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement &&
        !document.msFullscreenElement
      ) {
        // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(
            Element.ALLOW_KEYBOARD_INPUT
          );
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.controls {
  width: auto;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  .func {
    width: 40px;
    height: 40px;
    opacity: 0.8;
    border-radius: 4px;
    margin-right: 8px;
    cursor: pointer;
  }
  .func:last-child {
    margin-right: 0;
  }
}
</style>